<template>
	<view class="container">
		<!-- 核销码和二维码区域 -->
		<view class="er-section">
			<text class="er-code">核销码: WX123123</text>
			<image class="er-img" :src="'/static/vehicle_repair/bookingDetails/er-code.png'"></image>
		</view>

		<!-- 维修信息区域 -->
		<view class="info-section">
			<view class="section-title">维修信息</view>
			<view class="info-item">
				<view class="info-label">维修单号:</view>
				<view class="info-value">1233211234567</view>
			</view>

			<view class="info-item">
				<view class="info-label">维修状态:</view>
				<view class="info-value">进行中</view>
			</view>

			<view class="info-item">
				<view class="info-label">车主姓名:</view>
				<view class="info-value">张哲然</view>
			</view>

			<view class="info-item">
				<view class="info-label">联系方式:</view>
				<view class="info-value">15037939680</view>
			</view>

			<view class="info-item">
				<view class="info-label">维修方式:</view>
				<view class="info-value">上门取车</view>
			</view>

			<view class="info-item">
				<view class="info-label">取车位置:</view>
				<view class="info-value">洛龙区</view>
			</view>

			<view class="info-item">
				<view class="info-label">提交日期:</view>
				<view class="info-value">2025/11/03 15:00</view>
			</view>

			<view class="info-item">
				<view class="info-label">预约日期:</view>
				<view class="info-value">2025/11/05 11:00</view>
			</view>

		</view>

		<!-- 车辆信息区域 -->
		<view class="info-section">
			<view class="section-title">车辆信息</view>
			<view class="info-item">
				<view class="info-label">车辆类型:</view>
				<view class="info-value">轿车</view>
			</view>

			<view class="info-item">
				<view class="info-label">车牌号:</view>
				<view class="info-value">豫C·071EQ</view>
			</view>

			<view class="info-item">
				<view class="info-label">整车照片:</view>
				<image class="car-photo" :src="'/static/vehicle_repair/bookingDetails/xiaomiYu7.png'" mode="widthFix">
				</image>
			</view>

			<view class="info-item">
				<view class="info-label">维修部位:</view>
				<view class="repair-photos">
					<image class="repair-photo" :src="'/static/vehicle_repair/bookingDetails/repair.png'"
						mode="widthFix"></image>
					<image class="repair-photo" :src="'/static/vehicle_repair/bookingDetails/repair.png'"
						mode="widthFix"></image>
					<image class="repair-photo" :src="'/static/vehicle_repair/bookingDetails/repair.png'"
						mode="widthFix"></image>
				</view>
			</view>
		</view>

		<!-- 取消预约按钮 -->
		<button class="cancel-btn" @click="cancleBooking">取消预约</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			cancleBooking() {
				console.log("点击了取消预约按钮")
				uni.showModal({
					title: '提示',
					content: '确定取消预约吗？',
					success: (res) => {
						if (res.confirm) {
							//取消预约的接口
							console.log("取消预约"),
								uni.navigateTo({
									url: '/pages/index/index'
								})

						}
					}
				});
			}
		}
	};
</script>

<style>
	.container {
		padding: 20rpx;
		border-radius: 8rpx;
	}

	.er-section {
		text-align: center;
		/* 核销卷区域居中 */
		display: flex;
		align-items: center;
		/* 水平居中 */
		flex-direction: column;
		/* 垂直居中 */
		margin-bottom: 30rpx;
	}

	.er-code {
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}

	.er-img {
		width: 200rpx;
		height: 220rpx;
	}

	.info-section {
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		border-left: 6rpx solid #007aff;
		padding-left: 10rpx;
	}

	.info-item {
		display: flex;
		margin-bottom: 15rpx;
	}

	.info-label {
		width: 150rpx;
		font-size: 28rpx;
		color: #666;
	}

	.info-value {
		flex: 1;
		font-size: 28rpx;
	}

	.car-photo {
		width: 220rpx;
		margin-top: 10rpx;
	}

	.repair-photos {
		display: flex;
		gap: 10rpx;
		margin-top: 10rpx;
	}

	.repair-photo {
		width: 140rpx;
	}

	.cancel-btn {
		position: flex;
		margin-bottom: 30rpx;
		margin-right: 30rpx;
		width: 200rpx;
		background-color: #007aff;
		color: #fff;
		border-radius: 40rpx;
		height: 80rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>